<template>
  <view class="container">
    <view class="idiom-study-box">
      <view class="title-box" @click="goSearchIdiomPage">
        <uni-easyinput prefix-icon="search" placeholder="查找成语" disabled>
        </uni-easyinput>
      </view>
    </view>
    <view class="idiom-study-box">
      <view class="title-box">
        <view class="title">高频成语</view>
        <view class="des">考公必备成语积累</view>
      </view>

      <view class="action-box">
        <view class="but start-test" @click="studyHandle1">重新学习</view>
        <view class="but start-study" @click="studyHandle">开始学习</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const goSearchIdiomPage = () => {
  uni.navigateTo({ url: '/pages/idiom/search' })
}
const studyHandle = () => {
  uni.navigateTo({ url: '/pages/idiom/start-idiom' })
}
const studyHandle1 = () => {
  uni.showModal({
    title: '提示',
    content: '已学习的成语记录将会重置',
    success(result) {
      if (result.confirm) {
        uni.removeStorage({
          key: 'idiomListKey',
          success() {
            uni.showToast({
              title: '已重置!',
            })
          },
        })
      }
    },
  })
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 40rpx;

  .idiom-study-box {
    width: 100%;
    background-color: #fff;
    border-radius: 20rpx;
    box-sizing: border-box;
    padding: 40rpx;
    margin-bottom: 20rpx;

    .title-box {
      width: 100%;

      .title {
        font-size: 1.35rem;
        font-weight: 700;
      }
      .des {
        color: #262e3e;
        margin-top: 20rpx;
      }
    }

    .action-box {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 50rpx;

      .but {
        width: 45%;
        height: 75rpx;
        border-radius: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
      }

      .start-test {
        background-color: rgba(#2979ff, 0.2);
        color: #2979ff;
      }
      .start-study {
        background-color: #2979ff;
        color: #fff;
      }
    }
  }
}
</style>
